<template>
  <div class="registerDetail">
    <van-nav-bar :title="$route.meta.title" left-text="返回" :right-text="dataSource.isAddCus ? '查看客档' : '生成客档'" left-arrow :fixed="true" :placeholder="true" @click-left="$router.go(-1)" @click-right="onRightClick" />
    <div>
      <div class="headerbox">
        <div class="header_top" v-if="billidColumns && billidColumns.length != 0">
          <div class="header_item" v-for="(item, index) in billidColumns" :key="index" @click="handleClick(index)" :class="tabIndex == index ? 'active' : ''">
            <div class="txt">{{ item.number }}</div>
            <div class="txt1">{{ item.bizDate }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="top_detail">
      <div class="top_detail_lt">
        <div class="top_name">{{ dataSource.customerName }}</div>
        <div class="top_status">{{ dataSource.stateName }}</div>
        <div class="top_txt">线索状态</div>
      </div>
      <div class="top_detail_rt">
        <div class="top_txt">
          <i class="iconfont icon-tel" @click="handleTel(dataSource.phone)"></i>
        </div>
        <div class="top_txt">{{ dataSource.webType }}</div>
        <div class="top_txt">{{ "商机来源" }}</div>
      </div>
    </div>
    <div>
      <van-field readonly v-model="dataSource.showOrgName" name="所属展厅" label="所属展厅" input-align="right" />
      <van-field readonly v-model="dataSource.accountName" name="分配销售顾问" label="分配销售顾问" input-align="right" />
      <van-field readonly v-model="dataSource.yxCarModel" name="意向车型" label="意向车型" input-align="right" />
      <van-field readonly v-model="dataSource.carStockName" name="意向车源" label="意向车源" input-align="right" @click="topage(dataSource.carStockId)" right-icon="arrow" />
      <van-field readonly v-model="dataSource.createtTime" name="订单日期时间" label="订单日期时间" input-align="right" />
      <van-field readonly v-model="dataSource.leadsType" name="订单类型" label="订单类型" input-align="right" />
      <van-field readonly v-model="dataSource.customerName" name="客户姓名" label="客户姓名" input-align="right" />
      <van-field readonly name="客户性别" label="客户性别" input-align="right">
        <span slot="input">{{ dataSource.customerSex == 0 ? "女" : "男" }}</span>
      </van-field>
      <van-field readonly v-model="dataSource.province" name="省份" label="省份" input-align="right" />
      <van-field readonly v-model="dataSource.city" name="城市" label="城市" input-align="right" />
      <van-field readonly v-model="dataSource.location" name="区域" label="区域" input-align="right" />
    </div>

    <div style="margin-top:10px;'">
      <van-field readonly name="是否生成客档" label="是否生成客档" input-align="right">
        <span slot="input">{{ dataSource.isAddCus == true ? "是" : "否" }}</span>
      </van-field>
      <van-field readonly v-model="dataSource.dealWithTime" name="最近处理时间" label="最近处理时间" input-align="right" />
      <van-field readonly v-model="dataSource.firstDealWithTime" name="首次处理时间" label="首次处理时间" input-align="right" />
      <van-field readonly v-model="dataSource.viewUser" name="线索处理人" label="线索处理人" input-align="right" />
      <van-field readonly v-model="dataSource.clusReason" name="暂败/无效原因" label="暂败/无效原因" input-align="right" />
    </div>
    <div style="margin-top:10px;'">
      <van-field readonly v-model="dataSource.note" name="备注" label="备注" type="textarea" input-align="left" placeholder />
    </div>

    <!-- 转交 -->
    <van-dialog v-model="updateServiceVisible" title="请选择转交跟进人" show-cancel-button @confirm="updateServiceConfirm" :before-close="beforeCloseUpdateTel">
      <van-field v-model="updateServiceData.serverPsnName" name="跟进人" label="跟进人" input-align="right" placeholder="请选择" readonly right-icon="arrow" @click="handleUpdateSelect()" />
    </van-dialog>

    <!-- 操作面板 -->
    <van-share-sheet v-model="showShare" :options="options" @select="onSelect" />
    <div class="morebox" v-if="!dataSource.dealWithTime">
      <div class="moreBtn" @click="handleShowDo">编辑</div>
    </div>
  </div>
</template>

<script>
import {
  Search,
  Empty,
  Field,
  Form,
  Uploader,
  DatetimePicker,
  Tab,
  Tabs,
  ImagePreview,
  ShareSheet,
  Dialog
} from "vant";
import taskApi from "@/api/taskApi";
import { getCookies, isPhone } from "@/utils/util.js";
import sellManageApi from "@/api/sellManageApi";
import icon_edit from "@/assets/images/icon_edit.png";
import icon_foll from "@/assets/images/icon_foll.png";
import icon_zj from "@/assets/images/icon_zj.png";
import ico_apply from "@/assets/images/ico_apply.png";
import icon_buy from "@/assets/images/icon_buy.png";
import icon_del from "@/assets/images/icon_del.png";

export default {
  name: "taskCenterDetail",
  components: {
    Search,
    Empty,
    Field,
    Form,
    Uploader,
    DatetimePicker,
    Tab,
    Tabs,
    ImagePreview,
    ShareSheet,
    Dialog
  },
  data() {
    return {
      showTimerPicker: false,
      dataSource: {
        billId: "", //单据ID
        customerName: "", //客户名称
        phone: "", //电话
        stateName: "", //线索状态
        stateId: "", //线索状态ID
        webType: "", //线索来源
        webTypeValue: "", //线索来源值
        showOrgName: "", //所属展厅名称
        showOrgId: "", //所属展厅ID
        accountName: "", //分配销售顾问
        yxCarModel: "", //意向车型
        carStockId: "", // 意向车源ID
        carStockName: "", // 意向车源
        createTime: "", // 订单创建日期
        leadsType: "", //订单类型
        leadsTypeValue: "", //订单类型值
        province: "", // 省份
        city: "", // 城市
        location: "", // 区域
        isAddCus: "", // 是否生成客户档案
        firstDealWithTime: "", // 首次处理时间
        dealWithTime: "", // 最近处理时间
        viewUserId: "", // 线索处理人ID
        viewUserName: "", // 线索处理人
        clusReason: "", // 暂败无效原因
        clusReasonId: "", // 暂败无效原因ID
        note: "" // 备注
      },
      uploader: [],
      columns: [],
      showSelectPicker: false,
      disabled: false,
      detailId: "",
      tabActive: 0,
      recordList: [
        {
          id: 1,
          name: "闽D66666定期保养招揽",
          status: 2,
          insure: 2,
          time: "2023-06-25 12:29:30",
          address: "福建省厦门市思明区",
          vin: "LKHHAHHHAHHHHAYYYYA",
          tel: "13333333333",
          userName: "张某某",
          servieName: "高某某",
          carType: " CT5 2,0T",
          mileage: "9999"
        },
        {
          id: 2,
          name: "闽D66666",
          status: 2,
          insure: 2,
          time: "2023-06-25 12:29:30",
          address: "福建省厦门市思明区",
          vin: "LKHHAHHHAHHHHAYYYYA",
          tel: "16666666666",
          userName: "张某某",
          servieName: "高某某",
          carType: " CT5 2,0T",
          mileage: "9999"
        }
      ],
      statusList: [
        { name: "已处理", code: 1, check: false },
        { name: "未处理", code: 2, check: false }
      ],
      billidColumns: [], // 单据列表ID
      tabIndex: 0,
      userId: getCookies("userId"), //用户ID，必填，String
      showShare: false,
      options: [
        [
          { name: "编辑", icon: icon_edit, value: 1 },
          { name: "跟进", icon: icon_foll, value: 2 },
          { name: "转交", icon: icon_zj, value: 3 },
          { name: "评估申请", icon: ico_apply, value: 4 },
          { name: "采购申请", icon: icon_buy, value: 5 },
          { name: "删除", icon: icon_del, value: 6 }
        ]
      ],
      updateServiceVisible: false,
      updateServiceData: {
        fixCenterId: "",
        fixCenterName: "",
        currentServerPsnName: "",
        serverPsnName: "",
        serverPsnId: "",
        id: "",
        userId: ""
      }
    };
  },

  mounted() {
    if (this.$route.query) {
      this.detailId = this.$route.query.billId;
      this.getDetail(this.detailId);
    }
    if (this.$route.query && this.$route.query.list) {
      this.billidColumns = this.$route.query.list;
    }
  },
  methods: {
    // 点击导航栏右侧按钮
    onRightClick() {
      let path = "";
      let id = "";
      if (this.dataSource.isAddCus) {
        path = "/customManageDetail";
        id = this.dataSource.customerId;
      } else {
        path = "/customManageAdd";
        id = this.detailId;
      }
      this.$router.push({
        path,
        query: { id }
      });
    },
    handleClick(index) {
      this.tabIndex = index;
      let billId = this.billidColumns[index].billId;
      this.detailId = billId;
      this.getDetail(this.detailId);
    },
    topage(id) {
      if (!id) {
        return;
      }
      localStorage.setItem("billId", id);
      this.$router.push({
        path: `inventoryManageDetail?billId=${id}`
      });
    },
    getDetail(billId) {
      let userId = getCookies("userId");
      sellManageApi
        .secondHandCarFacade({
          method: "getSalesLeadsById", //固定值
          billId: billId,
          userId: userId //用户ID，必填，String
        })
        .then(res => {
          this.dataSource = res.data;
        });
    },

    // 选择下拉
    handleSelect(field) {
      if (this.disabled) {
        return;
      }
      this.showSelectPicker = true;
      if (field == "repair") {
        this.columns = [
          { name: "是", value: 1 },
          { name: "否", value: 2 }
        ];
      } else if (field == "outUser") {
        this.columns = [
          { name: "服务人员1", value: 1 },
          { name: "服务人员2", value: 2 }
        ];
      }
      this.field = field;
    },
    // 选择下拉确认
    handleSelectConfirm(value, index) {
      this.dataSource[this.field] = value.name;
      this.showSelectPicker = false;
    },

    onConfirm(val, field) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      // if (second >= 0 && second <= 9) { second = `0${second}` }
      this.dataSource[field] = `${year}-${month}-${day} ${hour}:${minute}:00`;
      this.showTimerPicker = false;
    },

    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      } else if (type === "minute") {
        return `${value}分`;
      } else if (type === "second") {
        return `${value}秒`;
      }
      return value;
    },
    //维修预约
    applyRepair() {
      this.$router.push("/applyRepair");
    },
    // 获取list名称
    getFieldName(list, key, val) {
      if (list && list.length > 0) {
        let obj = list.filter(item => {
          return item[key] == val;
        });
        if (obj.length > 0) {
          return obj[0].name;
        }
      }
      return null;
    },

    handleShowDo() {
      if (this.dataSource.dealWithTime) {
        return;
      }
      this.$router.push({
        path: "salesLeadsEdit",
        query: { billId: this.dataSource.billId }
      });
    },
    onSelect(option) {
      console.log(option);

      if (option.value == 1) {
        this.$router.push({
          path: "assessManageEdit",
          query: { billId: this.dataSource.billId }
        });
      }
      if (option.value == 2) {
        this.$router.push({
          path: "assessManageFollow",
          query: { billId: this.dataSource.billId }
        });
      }
      if (option.value == 3) {
        this.updateServiceVisible = true;
      }
      if (option.value == 4) {
        this.updateServiceVisible = true;
      }
      if (option.value == 5) {
        this.updateServiceVisible = true;
      }
      if (option.value == 6) {
        Dialog.confirm({
          title: "提示",
          message: "确认删除？"
        })
          .then(() => {
            // on confirm
            console.log("删除");
          })
          .catch(() => {
            console.log("取消");
            // on cancel
          });
      }
      this.showShare = false;
    },
    // 确认转交
    updateServiceConfirm() {
      console.log(this.updateServiceData);
      if (!this.updateServiceData.serverPsnId) {
        Notify({ type: "danger", message: "请选择跟进人" });
        return;
      }
      carApi
        .updateServerPsnAndFixCenter({
          id: this.updateServiceData.id, //单车表id，String，必填
          fixCenterId: this.updateServiceData.fixCenterId, //送修人电话，String，必填
          serverPsnId: this.updateServiceData.serverPsnId,
          userId: this.requestParams.userId //用户ID，必填，String
        })
        .then(res => {
          if (res.code == 1) {
            Notify({ type: "success", message: "更新成功" });
            this.initData();
          } else {
            Notify({ type: "danger", message: res.errorMessage });
          }
        });

      this.updateServiceVisible = false;
    },
    beforeCloseUpdateTel(action, done) {
      if (action === "confirm") {
        return done(false);
      } else {
        return done();
      }
    },
    handleUpdateSelect() {},
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`;
      } else {
        Notify({ type: "danger", message: "请在手机端使用此功能" });
      }
    }
  }
};
</script>

<style lang="less" scoped>
body {
  background: #f3f3f3;
}
.flex {
  display: flex;
  align-items: center;
}

.headerbox {
  width: 100%;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.header_top {
  display: flex;
  align-self: center;
  padding: 10px;
  overflow-x: auto;
  // width: 12rem;
  .header_item {
    // width: 3rem;
    background: #fff;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 5px;
    margin-right: 10px;
    .txt {
      margin-bottom: 5px;
    }
    &.active {
      border: 1px solid #ccc;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }
  }
}
.registerDetail {
  padding-bottom: 75px;
  .top_detail {
    display: flex;
    align-items: center;
    // width: 100%;
    background: #fff;
    padding: 10px;
    margin: 10px;
    .top_detail_lt {
      display: inline-block;
      text-align: center;
      width: 50%;
      border-right: 1px solid #f0f0f0;
    }
    .top_detail_rt {
      width: 50%;
      display: inline-block;
      text-align: center;
    }
    .top_name {
      font-weight: bold;
      font-size: 13px;
      margin-bottom: 5px;
    }
    .top_status {
      color: red;
      font-size: 12px;
      margin-bottom: 5px;
    }
    .top_txt {
      font-size: 12px;
      color: #333;
      margin-bottom: 5px;
      .icon-tel {
        background: #35bc04;
        color: #fff;
        border-radius: 50%;
        padding: 5px;
      }
      &:first-child {
        margin-bottom: 10px;
      }
    }
  }
}

// 跟进信息
.followInfo {
  padding: 10px;
  background: #fff;

  .foll_title {
    box-sizing: border-box;
    color: #646566;
    text-align: left;
    font-size: 15px;
    padding: 5px 10px5px5px;
    margin-bottom: 10px;
  }
  .followInfo_item {
    margin-bottom: 10px;
    position: relative;
    .followInfo_lt {
      width: 20%;
      .followInfo_time {
        font-size: 14px;
        color: #666;
        position: absolute;
        top: 5px;
      }
      &::before {
        content: "";
        height: 130px;
        width: 1px;
        background: #ccc;
        position: absolute;
        top: 0px;
        left: 0.4rem;
      }
      .icon-circle {
        color: #ccc;
        z-index: 2;
        position: absolute;
        top: 0px;
        left: 0.22rem;
        background: #fff;
      }
    }
    .followInfo_rt {
      background: #f1f1f1;
      width: 80%;
      padding: 15px 0 15px 15px;
      border-radius: 4px;
      .followInfo_tt {
        display: flex;
        align-items: center;
        border: 1px solid #02c081;
        font-size: 12px;
        border-radius: 3px;
        margin-bottom: 5px;
        width: 4rem;

        .followInfo_status {
          background: #02c081;
          color: #fff;
          padding: 5px;
        }
        .followInfo_time {
          padding: 5px;
          margin-left: 5px;
        }
      }
      .followInfo_num {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
      }
      .followInfo_data {
        font-size: 13px;
        color: #666;
        margin-bottom: 5px;
        .followInfo_img {
          width: 40px;
          height: 40px;
          margin-right: 5px;
        }
      }
    }
  }
}
.morebox {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  background: #fff;
  .moreBtn {
    background: #409eff;
    color: #fff;
    width: 75%;
    margin: auto;
    text-align: center;
    padding: 12px;
    border-radius: 5px;
    margin-top: 15px;
    font-size: 15px;
    margin-bottom: 25px;
  }
}
.icon-tel {
  font-size: 17px;
}
</style>
